<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>语文汉字学习</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/cnchar-all/cnchar.all.min.js"></script>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.c-font {
			margin: 0;
			padding: 0;
			line-height: 1.7em;
			letter-spacing: 1px;
			font-family: '楷体', 'Times New Roman', Times, serif;
			font-size: 48px;
			color: #000000;
		}

		.c-body {
			background-color: #ffffff;
			width: 100%;
			min-height: 100%;
			margin-bottom: 6px;
		}
		.n-space {min-height: 20px;clear:both;}
		.l-content {width: 100%;margin: 20px}
		.c-content {width: 100%;margin: 20px 0px}
		.c-left {width:45%;float:left;}
		.c-right {width:54%;float:right}
		.word {cursor:pointer}
		.c-grid {
			width: 100%;
		}

		.c-spell {
			width: 100%;
			font-size: 48px;
			color: #5500ff;
			font-family: '楷体';
		}

		.c-stroke {
			width: 100%;
			font-size: 48px;
			color: #ff0000;
			font-family: '楷体';
		}
		.c-radical {
			width: 100%;
			font-size: 48px;
			color: #55aa7f;
			font-family: '楷体';
		}
		table {
		    border-collapse: collapse;
			font-size: 48px;
			color: #000000;
			font-family: '楷体';
		}
		
		table, td, th {
		    border: 2px dashed #7f7f7f;text-align:right;vertical-align:center;
		}
	</style>
	<body>
		<div class="c-body">
			<div class="c-left">
				<div class="n-space"></div>
				<div class="l-content">
					<table class="word-list" id="word-list">
						
					</table>
				</div>				
			</div>
			<div class="c-right">
				<div class="n-space"></div>
				<div class="c-content">
					<div id='c-grid' class="c-grid"></div>
					<div id='c-spell' class="c-spell"></div>
					<div id='c-stroke' class="c-stroke"></div>
					<div id='c-radical' class="c-radical"></div>
				</div>
			</div>
		</div>


		<script type="text/javascript">
			<!--
			var data = [
						{"group":"一年级","list":
						[
						"乾","坤","有","序","宇","宙","无","疆","星","辰","密","布","斗","柄","指","航",
						"昼","白","夜","黑","日","明","月","亮","风","驰","雪","舞","电","闪","雷","响",
						"云","腾","致","雨","露","结","晨","霜","虹","霓","霞","辉","雾","沉","雹","降",
						"春","生","夏","长","秋","收","冬","藏","时","令","应","候","寒","来","暑","往",
						"远","古","洪","荒","海","田","沧","桑","陆","地","漂","移","板","块","碰","撞",
						"冰","川","冻","土","沙","漠","沃","壤","木","丰","树","森","岩","多","滩","广",
						"鸟","飞","兽","走",
						]},
						{"group":"二年级","list":["扣","二"]},
						{"group":"三年级","list":["扣","二"]},
						{"group":"四年级","list":["扣","二"]},
						{"group":"五年级","list":["扣","二"]},
						{"group":"六年级","list":["扣","二"]},
					]
			function show(word){
				$("#c-stroke").html("笔划:" + cnchar.stroke(word, 'order', 'shape'));
				$("#c-spell").html("拼音:" + word.spell('tone'));
				$("#c-radical").html("部首:" + cnchar.radical(word));
				cnchar.draw(word, {
					el: '#c-grid',
					type: cnchar.draw.TYPE.ANIMATION,
					animation: {
						loopAnimate: true
					},
					style: {
						radicalColor: '#0055ff',
						backgroundColor: '#c8c8c8',
						length: 250
					}
				});
			}
			$(document).ready(function(){
				//$.getJSON("data.json", function (data) {
					$.each(data, function (index, item) {
						console.log("=============>" + item.group);
						var html = "";
						var row = "";
						$.each(item.list, function (i, word) {
							row = row + "<td><span class='word'>" + word + "</span></td>";
							if((i + 1)%10==0){
								row = "<tr>" + row + "</tr>";
								html = html + row;
								row = "";
							}
						})
						$("#word-list ").append(html);
					})
				//})
				$('.word').click(function(e) { 
					var word = $(this).html();
					show(word);
				})
				show($('.word').first().html());
			})
			
			//
			-->
		</script>
	</body>
</html>
